 <template>
  <div id="sum_earnings" style="height:4rem;padding-bottom:.4rem"></div>
</template>
<script type="text/ecmascript-6">
import echarts from "echarts";
export default {
  props: ["echart"],
  computed: {
    jsondata() {
      return this.echart;
    }
  },
  watch: {
    jsondata(n, old) {
      console.log(1113, n);
      this.draw(this.echart);
    }
  },
  methods: {
    //写在methods方法里面封装然后在，在mounted()里面调用个人比较喜欢这种的写法，方便封装
    drawLine(name, echartData) {
      // 绘制图表
      const optionData = {
        title: {
          subtext: echartData.unit,
          top: -10,
          color: "#999999",
          textStyle: {
            fontSize: 12,
            color: "#999999"
          },
          fontWeight: "normal"
        },
        xAxis: {
          type: "category",
          data: echartData.x,
          axisTick: {
            show: false
          },
          nameLocation: "start",
          axisLabel: {
            showMaxLabel: true,

            rotate: 40,
            textStyle: {
              fontSize: 10
            }
          }
        },
        yAxis: {
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            // rotate: 10,
            textStyle: {
              fontSize: 10
            }
          }
        },

        grid: {
          x: 50,
          y: 30,
          x2: 25,
          y2: 50
        },
        series: [
          {
            name: "Forest",
            type: "bar",
            barGap: 0,
            // label: labelOption,
            data: echartData.y1,
            barWidth: 10, //柱图宽度
            itemStyle: {
              normal: {
                //每根柱子颜色设置
                color: "rgba(228, 152, 41, 1)"
              }
            }
          },
          {
            name: "Steppe",
            type: "bar",
            // label: labelOption,
            data: echartData.y2,
            barWidth: 10, //柱图宽度
            itemStyle: {
              normal: {
                //每根柱子颜色设置
                color: "rgba(23, 145, 255, 1)"
              }
            }
          }
        ]
      };
      name.setOption(optionData);
    },
    draw(echartData) {
      // 基于准备好的dom，初始化echarts实例 写在 mounted（）里面
      let sum_earnings = echarts.init(document.getElementById("sum_earnings"));
      this.drawLine(sum_earnings, echartData);
    }
  },
  mounted() {
    this.draw(this.echart);
  }
};
</script>

 